<template>
    <img :src="base64" />
</template>

<script>
export default {
    props: {
        width: {
            type: Number,
            required: true
        },
        height: {
            type: Number,
            required: true
        },
        bgcolor: {
            type: String,
            default: '#ccc'
        },
        color: {
            type: String,
            default: '#959595'
        },
        text: {
            type: String,
        },
        font: {
            type: String,
            default: 'Consolas'
        }
    },
    computed: {
        base64() {
            let text = this.text == null ? (this.width + 'x' + this.height) : this.text
            let canvas = window.document.createElement('canvas')
            canvas.width = this.width
            canvas.height = this.height
            let ctx = canvas.getContext('2d')
            ctx.fillStyle = this.bgcolor
            ctx.fillRect(0, 0, this.width, this.height)
            ctx.fillStyle = this.color
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            let textHeight = Math.min(this.width, this.height) / 2
            ctx.font = textHeight + 'px ' + this.font
            if (text) {
                ctx.fillText(text, this.width / 2, this.height / 2)
            }
            let imageData = canvas.toDataURL()
            return imageData
        }
    }
};
</script>
